<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="@/static/images/2.png"></image>
		<image class="img-b" src="@/static/images/3.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">欢迎使用，校园慧选小程序</view>
		<form class="cl">
			<view class="t-a">
				<image src="@/static/images/学号.png"></image>
				<view class="line"></view>
				<input type="number" placeholder="请输入学号" maxlength="11" v-model="userFrom.username" />
			</view>
			<view class="t-a">
				<image src="@/static/images/密码.png"></image>
				<view class="line"></view>
				<input name="password" password='true' maxlength="6" placeholder="请输入密码" v-model="userFrom.password" />
			</view>
			<view class="btn">
				<button class="login" @click="login()">登 录</button>
				<view class="register" @click="register" size="mini">注 册</view>
			</view>
		</form>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		AppLoginApi
	} from '@/api/login';
	import {
		useUserStore
	} from '@/store';

	const title = ref('欢迎回来！');
	const userFrom = ref({
		username: '',
		password: ''
	});

	// 当前登录按钮操作
	const login = async () => {
		if (!userFrom.value.username) {
			uni.showToast({
				title: '请输入学号',
				icon: 'none'
			});
			return;
		}
		if (!/^\d{11}$/.test(userFrom.value.username)) {
			uni.showToast({
				title: '请输入正确学号（11位数字）',
				icon: 'none'
			});
			return;
		}
		if (!userFrom.value.password) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			});
			return;
		}

		// 调用后台登录接口
		try {
			const response = await AppLoginApi(userFrom.value);
			if (response.code === 1) {
				uni.showToast({
					title: '登录成功！',
					icon: 'none'
				});
				// 使用 Pinia store 保存用户数据
				const userStore = useUserStore();
				userStore.setUserData(response.data);

				uni.switchTab({
					url: '/pages/views/index/index'
				});

			} else if (response.msg === "用户已被禁用") {
				uni.showToast({
					title: '用户已被禁用,请联系管理员',
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: '登录失败，请检查用户名或密码',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error(error);
			uni.showToast({
				title: '登录失败，请稍后再试',
				icon: 'none'
			});
		}
	};
	const register = () => {
		uni.navigateTo({
			url: '/pages/register/index'
		})
	}
</script>


<style lang="scss" scoped>
	.img-a {
		position: absolute;
		width: 100%;
		top: -150rpx;
		right: 0;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
	}

	.t-login {
		width: 650rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;

	}

	.t-login .login {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	.t-login .register {
		margin-top: 20rpx;
		margin-left: 550rpx;
		background: #f5f5f5;
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		margin-right: 20rpx;
	}

	.t-login .t-a .line {
		width: 2rpx;
		height: 40rpx;
		background-color: #dedede;
		position: absolute;
		top: 28rpx;
		left: 98rpx;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 300rpx 0 30rpx 0;
		font-weight: bold;
	}

	.t-login .t-b2 {
		text-align: left;
		font-size: 32rpx;
		color: #aaaaaa;
		padding: 0rpx 0 120rpx 0;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 200rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #000;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}
</style>